<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-select v-model="search_name" value-key="id" remote filterable placeholder="请搜索维护人员姓名进行添加"
					@change="handlecheckMaintenance" :remote-method="maintenanceChange" style="width: 100%;">
					<el-option v-for="item in maintenance_list" :key="item.id" :label="item.name" :value="item">
					</el-option>
				</el-select>
			</el-col>
		</el-row>
		<div class="addressd-box">
			<div class="addressd-box-title">
				<span>选中维护人员,点击即可删除</span>
				<el-button type="danger" plain size="mini" @click="delAll">全部清空</el-button>
			</div>
			<div class="choose-address">
				<div class="choose-address-info" v-for="(item, index) in check_maintenance" :key="index">
					<el-button type="primary" size="mini" icon="el-icon-delete" @click="delMaintenance(index)">
						{{item.name}}
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import API from '@/api/index.js'

	export default {
		data() {
			return {
				maintenance_list: [],
				search_name: '',
				check_maintenance: [],
			}
		},
		props: ['maintenance'],
		watch: {
			maintenance(val) {
				let self = this
				console.log(1234,val)
				self.check_maintenance = val;
				if (this.check_maintenance.length == 0) {
					this.check_maintenance = [];
				}
			}
		},
		mounted() {
			this.maintenanceChange();
		},
		methods: {
			// 加载更多数据
			maintenanceChange(val) {
				let self = this;
				self.search_name = val;
				API.maintenances(1, 10, self.search_name).then(res => {
					let data = res.data.data;
					self.$notify({
						message: '搜索成功'
					});
					self.maintenance_list = [];
					data.map(item => {
						self.maintenance_list.push({
							id: item.id,
							name: item.name
						})
					})
					return self.maintenance_list;
				}).catch(err => {
					self.$message.error(err.response.data.message)
				});
			},
			// 选中的地址
			handlecheckMaintenance(val) {
				let self = this;
				let isMaintenance = true;
				if (this.findValue(val.id)) {
					self.$notify.error({
						message: '已选中该维护人员,请勿重复选择'
					});
					isMaintenance = false
				}
				
				if(isMaintenance) {
					self.check_maintenance.push(val);
				}
			
				self.$emit('getMaintenance', {
					new_maintenance: self.check_maintenance
				})
			},
			// 删除维护人员
			delMaintenance(val) {
				let self = this;
				self.check_maintenance.splice(val, 1);
				console.log(self.check_maintenance)
				self.$emit('getMaintenance', {
					new_maintenance: self.check_maintenance
				})
			},
			// 全部清空
			delAll() {
				let self = this;
				self.check_maintenance = [];
				self.$emit('getMaintenance', {
					new_maintenance: self.check_maintenance
				})
			},
			
			// 是否存在元素
			findValue(value) {
				let self = this;
				let isElement = false;
				for (let i = 0; i < self.check_maintenance.length; i++) {
					if (self.check_maintenance[i].id === value) {
						isElement = true;
					}
				}
				return isElement;
			},
		}
	}
</script>

<style scoped lang="scss">
	.addressd-box {
		box-sizing: border-box;
		margin-top: 10px;
		// padding: 10px;
		border: 1px #ccc solid;
		border-radius: 10px;

		.addressd-box-title {
			display: flex;
			align-items: center;
			padding: 6px 10px;
			font-size: 14px;

			span {
				margin-right: 10px;
			}
		}

		.choose-address {
			display: flex;
			flex-wrap: wrap;

			.choose-address-info {
				margin: 6px;
			}
		}
	}
</style>
